<template>
  <div class="icon-switch">
    <a-tooltip :title="title">
      <a-button
        @click.prevent="handleClick"
        :type="value ? 'primary' : 'default'"
        shape="circle"
      >
        <template #icon>
          <RenderVNode :v-node="icon"></RenderVNode>
        </template>
      </a-button>
    </a-tooltip>
  </div>
</template>

<script setup lang="ts">
import RenderVNode from './RenderVNode'
const props = defineProps(['value', 'icon', 'title'])
const emits = defineEmits(['change'])
const handleClick = () => {
  emits('change', !props.value)
}
</script>

<style scoped lang="scss"></style>
